<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>记录财务活动 - 嘀嗒</title>
    <!--  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <script>
        tailwind.config = {
            // darkMode: 'class', // Disable dark mode by default
            theme: {
                extend: {
                    colors: {
                        'primary': '#10B981',
                        'primary-focus': '#059669',
                        'base-100-light': '#FFFFFF',
                        'base-content-light': '#1F2937',
                        'input-bg-light': '#F9FAFB', // gray-50
                        'input-border-light': '#D1D5DB', // gray-300
                        'text-muted-light': '#6B7280', // gray-500
                        'expense': '#EF4444', // red-500
                        'income': '#22C55E', // green-500
                    }
                }
            }
        }
    </script>
    <style>
        body {
            background-color: #FFFFFF; /* base-100-light */
            color: #1F2937; /* base-content-light */
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
            display: flex;
            flex-direction: column;
            height: 100vh;
        }
        .type-selector .type-option {
            border-bottom: 3px solid transparent;
        }
        .type-selector .type-option.selected {
            border-color: #10B981; /* primary */
            color: #10B981;
        }
        .category-selector .category-option {
            width: 60px; height: 60px;
            border: 2px solid transparent;
        }
        .category-selector .category-option.selected {
            border-color: #10B981; /* primary */
            background-color: #10B98133;
        }
        input[type="date"]::-webkit-calendar-picker-indicator {
            /* filter: invert(0.8); // Removed for light theme, default should be fine */
        }
    </style>
</head>
<body class="antialiased flex flex-col bg-base-100-light text-base-content-light">

    <header class="p-4 sticky top-0 bg-base-100-light z-10 shadow-sm flex items-center justify-between border-b border-gray-200">
        <button onclick="document.location.href='home_finance.html'" class="text-primary hover:text-primary-focus">
            <i class="fas fa-times text-xl"></i>
        </button>
        <h1 class="text-xl font-semibold text-base-content-light">记录财务活动</h1>
        <button onclick="document.location.href='home_finance.html'" class="text-primary hover:text-primary-focus font-semibold">
            保存
        </button>
    </header>

    <main class="flex-grow p-4 overflow-y-auto space-y-6">
        <!-- Transaction Type -->
        <section>
            <label for="transaction-type" class="block text-sm font-medium text-text-muted-light mb-1">财务活动类型</label>
            <select id="transaction-type" class="w-full bg-input-bg-light border border-input-border-light text-base-content-light rounded-lg p-3 focus:ring-primary focus:border-primary">
                <option value="expense_daily">日常支出</option>
                <option value="income_salary">工资收入</option>
                <option value="asset_purchase">购买资产</option>
                <option value="liability_create">产生负债</option> 
                <option value="passive_income_generation">被动收入入账</option>
                <option value="debt_payment">偿还负债</option>
                <option value="asset_sell">出售资产</option>
            </select>
        </section>

        <!-- Amount / Value -->
        <section id="amount-section">
            <label for="amount" class="block text-sm font-medium text-text-muted-light mb-1">金额/价值</label>
            <input type="number" id="amount" placeholder="0.00" class="w-full bg-input-bg-light border border-input-border-light rounded-lg p-3 text-2xl font-bold focus:ring-primary focus:border-primary text-base-content-light">
        </section>

        <!-- Asset/Liability Specific Fields (Initially Hidden) -->
        <div id="asset-fields" class="hidden space-y-4">
            <section>
                <label for="asset-name" class="block text-sm font-medium text-text-muted-light mb-1">资产名称</label>
                <input type="text" id="asset-name" placeholder="例如：3房2厅公寓 / XX公司股票" class="w-full bg-input-bg-light border border-input-border-light text-base-content-light rounded-lg p-3 focus:ring-primary focus:border-primary">
            </section>
            <section>
                <label for="asset-cost" class="block text-sm font-medium text-text-muted-light mb-1">资产成本/买入价</label>
                <input type="number" id="asset-cost" placeholder="0.00" class="w-full bg-input-bg-light border border-input-border-light text-base-content-light rounded-lg p-3 focus:ring-primary focus:border-primary">
            </section>
            <section>
                <label for="down-payment" class="block text-sm font-medium text-text-muted-light mb-1">首付 (如适用)</label>
                <input type="number" id="down-payment" placeholder="0.00" class="w-full bg-input-bg-light border border-input-border-light text-base-content-light rounded-lg p-3 focus:ring-primary focus:border-primary">
            </section>
            <section>
                <label for="passive-income" class="block text-sm font-medium text-text-muted-light mb-1">月被动收入 (资产产生)</label>
                <input type="number" id="passive-income" placeholder="0.00" class="w-full bg-input-bg-light border border-input-border-light text-base-content-light rounded-lg p-3 focus:ring-primary focus:border-primary">
            </section>
        </div>

        <div id="liability-fields" class="hidden space-y-4">
            <section>
                <label for="liability-name" class="block text-sm font-medium text-text-muted-light mb-1">负债名称</label>
                <input type="text" id="liability-name" placeholder="例如：房贷 / 车贷 / 信用卡账单" class="w-full bg-input-bg-light border border-input-border-light text-base-content-light rounded-lg p-3 focus:ring-primary focus:border-primary">
            </section>
            <section>
                <label for="liability-amount" class="block text-sm font-medium text-text-muted-light mb-1">负债总额</label>
                <input type="number" id="liability-amount" placeholder="0.00" class="w-full bg-input-bg-light border border-input-border-light text-base-content-light rounded-lg p-3 focus:ring-primary focus:border-primary">
            </section>
            <section>
                <label for="liability-payment" class="block text-sm font-medium text-text-muted-light mb-1">月支出/月供 (负债导致)</label>
                <input type="number" id="liability-payment" placeholder="0.00" class="w-full bg-input-bg-light border border-input-border-light text-base-content-light rounded-lg p-3 focus:ring-primary focus:border-primary">
            </section>
        </div>

        <!-- Category (Dynamic based on Transaction Type) -->
        <section id="category-section">
            <label for="category" class="block text-sm font-medium text-text-muted-light mb-1">分类</label>
            <select id="category" class="w-full bg-input-bg-light border border-input-border-light text-base-content-light rounded-lg p-3 focus:ring-primary focus:border-primary">
                <!-- Options will be populated by JavaScript -->
            </select>
        </section>

        <div id="expense-category-options" class="hidden">
            <option value="food">餐饮</option>
            <option value="transport">交通</option>
            <option value="shopping">购物</option>
            <option value="entertainment">娱乐</option>
            <option value="housing">住房</option>
            <option value="health">医疗健康</option>
            <option value="education">教育</option>
            <option value="utilities">水电煤</option>
            <option value="insurance">保险</option>
            <option value="personal_care">个人护理</option>
            <option value="gifts">礼金</option>
            <option value="other_expense">其他支出</option>
        </div>

        <div id="income-category-options" class="hidden">
            <option value="salary">工资</option>
            <option value="investment">投资收益</option>
            <option value="bonus">奖金</option>
            <option value="freelance">兼职</option>
            <option value="other_income">其他收入</option>
        </div>

        <div id="asset-category-options" class="hidden">
            <option value="real_estate">房地产</option>
            <option value="stocks">股票/基金</option>
            <option value="business">生意/企业</option>
            <option value="bonds">债券</option>
            <option value="collectibles">收藏品</option>
            <option value="crypto">加密货币</option>
            <option value="other_asset">其他资产</option>
        </div>

        <div id="liability-category-options" class="hidden">
            <option value="mortgage">房贷</option>
            <option value="car_loan">车贷</option>
            <option value="student_loan">助学贷款</option>
            <option value="credit_card_debt">信用卡欠款</option>
            <option value="personal_loan">个人贷款</option>
            <option value="other_liability">其他负债</option>
        </div>

        <!-- Account -->
        <section>
            <label for="account" class="block text-sm font-medium text-text-muted-light mb-1">账户</label>
            <select id="account" class="w-full bg-input-bg-light border border-input-border-light text-base-content-light rounded-lg p-3 focus:ring-primary focus:border-primary">
                <option>现金</option>
                <option>支付宝</option>
                <option>微信支付</option>
                <option>银行卡 (招商)</option>
                <option>信用卡 (建行)</option>
            </select>
        </section>

        <!-- Date -->
        <section>
            <label for="transaction-date" class="block text-sm font-medium text-text-muted-light mb-1">日期</label>
            <input type="date" id="transaction-date" class="w-full bg-input-bg-light border border-input-border-light text-base-content-light rounded-lg p-3 focus:ring-primary focus:border-primary">
        </section>

        <!-- Notes (Optional) -->
        <section>
            <label for="transaction-notes" class="block text-sm font-medium text-text-muted-light mb-1">备注 (可选)</label>
            <textarea id="transaction-notes" placeholder="例如：和朋友聚餐" rows="2" class="w-full bg-input-bg-light border border-input-border-light text-base-content-light rounded-lg p-3 focus:ring-primary focus:border-primary"></textarea>
        </section>

        <!-- Image from Pexels: https://www.pexels.com/photo/person-holding-black-pen-and-white-paper-4145146/ -->
        <img src="https://images.pexels.com/photos/4145146/pexels-photo-4145146.jpeg?auto=compress&cs=tinysrgb&w=600" alt="Person holding pen" class="w-full h-32 object-cover rounded-lg mt-4 opacity-50">

        <div class="mt-8">
            <button class="w-full bg-red-500/20 hover:bg-red-600/30 text-red-400 font-semibold py-3 px-4 rounded-lg transition duration-150">
                <i class="fas fa-trash-alt mr-2"></i> 删除记录 (编辑时显示)
            </button>
        </div>

    </main>

    <script>
        const transactionTypeSelect = document.getElementById('transaction-type');
        const amountInput = document.getElementById('amount');
        const amountLabel = document.querySelector('#amount-section label');
        const assetFields = document.getElementById('asset-fields');
        const liabilityFields = document.getElementById('liability-fields');
        const categorySelect = document.getElementById('category');
        const categorySection = document.getElementById('category-section');

        const expenseCategories = document.getElementById('expense-category-options').innerHTML;
        const incomeCategories = document.getElementById('income-category-options').innerHTML;
        const assetCategories = document.getElementById('asset-category-options').innerHTML;
        const liabilityCategories = document.getElementById('liability-category-options').innerHTML;

        function updateFormForTransactionType() {
            const selectedType = transactionTypeSelect.value;

            // Reset visibility and classes
            assetFields.classList.add('hidden');
            liabilityFields.classList.add('hidden');
            amountInput.classList.remove('text-expense', 'text-income', 'text-gray-200');
            categorySection.classList.remove('hidden');

            switch (selectedType) {
                case 'expense_daily':
                    amountLabel.textContent = '支出金额';
                    amountInput.classList.add('text-expense');
                    categorySelect.innerHTML = expenseCategories;
                    break;
                case 'income_salary':
                    amountLabel.textContent = '收入金额';
                    amountInput.classList.add('text-income');
                    categorySelect.innerHTML = incomeCategories;
                    break;
                case 'asset_purchase':
                    amountLabel.textContent = '总投资额 (若有贷款，填入总价)';
                    amountInput.classList.add('text-gray-200');
                    assetFields.classList.remove('hidden');
                    categorySelect.innerHTML = assetCategories;
                    break;
                case 'liability_create':
                    amountLabel.textContent = '负债总额';
                    amountInput.classList.add('text-expense');
                    liabilityFields.classList.remove('hidden');
                    categorySelect.innerHTML = liabilityCategories;
                    break;
                case 'passive_income_generation':
                    amountLabel.textContent = '被动收入金额';
                    amountInput.classList.add('text-income');
                    // Category might be linked to an existing asset, or general passive income type
                    categorySelect.innerHTML = '<option value="real_estate_rental">房租收入</option><option value="stock_dividend">股息分红</option><option value="business_profit">生意利润</option><option value="royalty">版权/专利</option><option value="other_passive">其他被动收入</option>';
                    break;
                case 'debt_payment':
                    amountLabel.textContent = '偿还金额';
                    amountInput.classList.add('text-expense');
                    // Category could be the type of debt being paid
                    categorySelect.innerHTML = liabilityCategories; 
                    break;
                case 'asset_sell':
                    amountLabel.textContent = '出售价格';
                    amountInput.classList.add('text-income');
                    assetFields.classList.remove('hidden'); // Show asset fields to identify which asset is sold
                    categorySelect.innerHTML = assetCategories;
                    break;
                default:
                    amountLabel.textContent = '金额/价值';
                    amountInput.classList.add('text-gray-200');
                    categorySection.classList.add('hidden');
            }
        }

        transactionTypeSelect.addEventListener('change', updateFormForTransactionType);

        // Set default transaction date to today
        const today = new Date().toISOString().split('T')[0];
        document.getElementById('transaction-date').value = today;

        // Initial form setup
        updateFormForTransactionType();
    </script>

</body>
</html>